<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./bootstrap/css/bootstrap.css">
  <link rel="stylesheet" href="./css/pubilc.css">
  <link rel="stylesheet" href="./css/account.css">
</head>

<body>
  <script src="./public/header.js"></script>
  <div class="content bg-light">
    <!-- 深色背景图 -->
    <div class="bg-dark">
      <div class="container bx">
        <div class="row align-items-center">
          <div class="col">
            <div class="visible-lg-block">
              <h1 class="h2 text-white">帐户</h1>
            </div>

            <!--面包屑导航 -->
            <ol class="breadcrumb breadcrumb-light breadcrumb-no-gutter mb-0">
              <li class="breadcrumb-item">帐户</li>
              <li class="breadcrumb-item active" aria-current="page">个人信息</li>
              </li>
            </ol>
            <!-- End 面包屑导航 -->
          </div>

          <div class="col-auto">
            <!-- 登出 -->
            <div class="visible-lg-block visible-md-block logout">
              <a class="btn btn-sm btn-soft-light" href="#">登出</a>
            </div>
            <!-- end登出 -->

          </div>
        </div>
        <!-- 响应按钮 -->
        <!-- <div class="dropdown col-auto visible-xs-block menu">
          <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"
            aria-haspopup="true" aria-expanded="true">
            基本信息
            <span class="caret"></span>
          </button>
          <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
            <li><a href="#">基本信息</a></li>
            <li><a href="#">登录与安全</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">在学课程</a></li>
            <li><a href="#">学习记录</a></li>
          </ul>
        </div> -->
        <!-- End 响应按钮 -->
      </div>
    </div>
    <!-- 内容模块 -->
    <div class="container mt-lg-n10 con-bd">
      <div class="row">
        <div class="col-lg-3 col-md-3 col-sm-12">
          <!-- 侧导航栏 -->
          <div class="navbar-light">
            <div id="sidebarNav" class="collapse navbar-collapse navbar-vertical">
              <!-- Card -->
              <div class="card mb-5">
                <div class="card-body">
                  <!-- 头像 -->
                  <div class="visible-lg-block  text-center mb-5">
                    <div class="avatar avatar-xxl avatar-circle mb-3">
                      <img class="avatar-img" src="./img/AbrahamLincoln.jpg" alt="Image Description">

                    </div>

                    <h4 class="card-title">Y妍Y</h4>
                    <p class="card-text font-size-1">xxxxxx</p>
                  </div>
                  <!-- End 头像 -->

                  <div class="items">
                    <!-- Nav -->
                    <h6 class="text-cap small">帐户</h6>

                    <!-- List -->
                    <ul class="nav nav-sub nav-sm nav-tabs nav-list-y-2 mb-4">
                      <li class="nav-item">
                        <a class="nav-link active" href="account-overview.html">
                          <i class="fas fa-id-card nav-icon iconfont">&#xe670;
                          </i> 个人信息
                        </a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link " href="account-login-and-security.html">
                          <i class="fas fa-shield-alt nav-icon iconfont">&#xe60f;</i> 登录与安全
                        </a>
                      </li>
                    </ul>
                    <!-- End List -->

                    <h6 class="text-cap small">课程</h6>

                    <!-- List -->
                    <ul class="nav nav-sub nav-sm nav-tabs nav-list-y-2 mb-4">
                      <li class="nav-item">
                        <a class="nav-link " href="account-orders.html">
                          <i class="fas fa-shopping-basket nav-icon iconfont">&#xeafb;
                          </i> 在学课程
                          <span class="badge badge-soft-dark badge-pill nav-link-badge">2</span>
                        </a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link " href="account-wishlist.html">
                          <i class="fas fa-heart nav-icon iconfont">&#xe610;
                          </i>学习记录

                        </a>
                      </li>
                    </ul>
                    <!-- End List -->
                    <div class="hidden-lg">
                      <div class="dropdown-divider"></div>
                      <!--登出 -->
                      <!-- List -->
                      <ul class="nav nav-sub nav-sm nav-tabs nav-list-y-2 ">
                        <li class="nav-item">
                          <a class="nav-link text-primary little-btn" href="#">
                            <i class="fas fa-sign-out-alt nav-icon"></i>登出
                          </a>
                        </li>
                      </ul>
                      <!-- End List -->
                    </div>
                    <!-- End Nav -->
                  </div>
                </div>
              </div>
              <!-- End Card -->
            </div>
          </div>
          <!-- End 侧导航栏 -->
        </div>

        <div class="col-lg-9 col-md-9 col-sm-12">
          <!-- Card -->
          <div class="card mb-3 mb-lg-5">
            <div class="card-header">
              <h5 class="card-title">基本信息</h5>
            </div>

            <!-- Body -->
            <div class="card-body">
              <form>
                <!--头像 Form Group -->
                <div class="row form-group">
                  <label class="col-sm-3 col-form-label input-label">个人信息</label>

                  <div class="col-sm-9">
                    <div class="media align-items-center">
                      <label class="avatar avatar-xl avatar-circle mr-4" for="avatarUploader">
                        <img id="avatarImg" class="avatar-img" src="./img/AbrahamLincoln.jpg" alt="Image Description">
                      </label>

                      <div class="media-body">
                        <div class="btn btn-sm btn-primary file-attachment-btn mb-2 mb-sm-0 mr-2">上传头像
                          <input type="file" class="js-file-attach file-attachment-btn-label" id="avatarUploader">
                        </div>

                        <a class="btn btn-sm btn-white mb-2 mb-sm-0" href="javascript:;">删除</a>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- End Form Group -->

                <!--昵称 Form Group -->
                <div class="row form-group">
                  <label for="nickNameLabel" class="col-sm-3 col-form-label input-label">昵称</label>

                  <div class="col-sm-9">
                    <input type="email" class="form-control" name="email" id="nickNameLabel"
                      placeholder="xxxxxx@example.com" value="Y妍Y">
                  </div>
                </div>
                <!-- End Form Group -->

                <!--邮箱 Form Group -->
                <div class="row form-group">
                  <label for="emailLabel" class="col-sm-3 col-form-label input-label">邮箱</label>

                  <div class="col-sm-9">
                    <input type="email" class="form-control" name="email" id="emailLabel"
                      placeholder="xxxxxx@example.com" aria-label="clarice@example.com" value="24323443@qq.com">
                  </div>
                </div>
                <!-- End Form Group -->

                <!-- 手机号Form Group -->
                <div class="row form-group">
                  <label for="phoneLabel" class="col-sm-3 col-form-label input-label">手机号</label>

                  <div class="col-sm-9">

                    <input type="text" class="js-masked-input form-control" name="phone" id="phoneLabel"
                      placeholder="+x(xxx)xxx-xx-xx" value="1232143414">

                  </div>
                </div>

                <!--性别 Form Group -->
                <div class="row form-group">
                  <label class="col-sm-3 col-form-label input-label">性别</label>

                  <div class="col-sm-9">
                    <div class="input-group input-group-md-down-break">
                      <!-- Custom Radio -->
                      <div class="form-control customs">
                        <div class="custom-control custom-radio">
                          <input type="radio" class="custom-control-input" name="genderTypeRadio" id="genderTypeRadio1">
                          <label class="custom-control-label" for="genderTypeRadio1">男</label>
                        </div>
                      </div>
                      <!-- End Custom Radio -->

                      <!-- Custom Radio -->
                      <div class="form-control customs">
                        <div class="custom-control custom-radio">
                          <input type="radio" class="custom-control-input" name="genderTypeRadio" id="genderTypeRadio2"
                            checked="">
                          <label class="custom-control-label" for="genderTypeRadio2">女</label>
                        </div>
                      </div>
                      <!-- End Custom Radio -->

                      <!-- Custom Radio -->
                      <div class="form-control customs">
                        <div class="custom-control custom-radio">
                          <input type="radio" class="custom-control-input" name="genderTypeRadio" id="genderTypeRadio3">
                          <label class="custom-control-label" for="genderTypeRadio3">其他</label>
                        </div>
                      </div>
                      <!-- End Custom Radio -->
                    </div>
                  </div>
                </div>
                <!-- End Form Group -->

                <!-- 简介Form Group -->
                <div class="row form-group">
                  <label class="col-sm-3 col-form-label input-label">个人简介</label>

                  <div class="col-sm-9">
                    <input type="text" name="" id="" class="form-control">

                  </div>
                </div>
                <!-- End Form Group -->
            </div>

            </form>
            <!-- Footer -->
            <div class="card-footer d-flex justify-content-end">
              <a class="btn btn-white" href="javascript:;">取消</a>
              <span class="mx-2"></span>
              <a class="btn btn-primary" href="javascript:;">保存修改</a>
            </div>
            <!-- End Footer -->

          </div>
          <!-- End Body -->


        </div>
        <!-- End Card -->
      </div>
    </div>
    <!-- End Row -->
  </div>
  </div>
  <script src="./public/footer.js"></script>
</body>

</html>